import React, { useEffect, useState } from 'react';
import Card from './Card';
import { getMonthlyEnergyConsumption } from '../api/sceneBoard';

interface EnergyMonitorProps {
  energyData: any
}

const EnergyMonitor: React.FC<EnergyMonitorProps> = ({ energyData }) => {
  return (
    <Card title="能耗监控" subTitle='Energy consumption monitoring' desc="（本月）" style={{ height: '50%', flexShrink: 0, flex: 1 }} >
      <div className="energy-monitor">
        <div className="monitor-content">
          <div className="energy-value">
            <span className="value">{energyData?.economicBenefit}元</span>
            <div className="label">经济效益</div>
          </div>
          <div className="col" style={{ display: 'flex', gap: '16px', flexDirection: 'column' }}>
            <div className="energy-rate">
              <span className="value">{energyData?.electricityConsumption}kw/h</span>
              <div className="label">当月能耗</div>
            </div>
            <div className="energy-rate">
              <span className="value">{energyData?.energySavingRatio * 100}%</span>
              <div className="label">节约比例</div>
            </div>
          </div>
        </div>
      </div>
    </Card >
  );
};

export default EnergyMonitor;
